<template>
	<cl-crud :ref="setRefs('crud')" @load="onLoad">
		<el-row type="flex" align="middle">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-export-btn type="success" :columns="table.columns" />
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key />
		</el-row>

		<el-row>
			<!-- 数据表格 -->
			<cl-table :ref="setRefs('table')" v-bind="table" >
                <template #column-isPC="{ scope }">
					<el-tag type='success'>{{ scope.row.isPC?"有":"无" }}</el-tag>
				</template>
                <template #column-isiPad="{ scope }">
					<el-tag type='success'>{{ scope.row.isiPad?"有":"无" }}</el-tag>
				</template>
                <template #column-isTV="{ scope }">
					<el-tag type='success'>{{ scope.row.isTV?"有":"无" }}</el-tag>
				</template>
                <template #column-is_center_table="{ scope }">
					<el-tag type='success'>{{ scope.row.is_center_table?"有":"无" }}</el-tag>
				</template>
            </cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</el-row>

		<!-- 新增、编辑 -->
		<cl-upsert :ref="setRefs('upsert')" v-bind="upsert" />
	</cl-crud>
</template>

<script lang="ts">
import { defineComponent, inject, reactive } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useRefs } from "/@/core";

export default defineComponent({
	setup() {
		const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject<any>("service");

		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			items: [
				{
					prop: "name",
					label: "教室名称",
					span: 24,
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入教室名称"
						}
					},
					rules: {
						required: true,
						message: "教室名称不能为空"
					}
				},
                {
					prop: "isPC",
					label: "电脑",
					span: 12,
					value: true,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "有",
								value: true
							},
							{
								label: "无",
								value: false
							}
						]
					},
					rules: {
						required: true,
						message: "电脑不能为空"
					}
				},
                {
					prop: "pc_num",
					label: "电脑数量",
					span: 12,
					value: 1,
                    hidden: ({ scope }: any) => !(scope.isPC),
					component: {
						name: "el-input-number"
					}
				},
                {
					prop: "isiPad",
					label: "平板",
					span: 12,
					value: true,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "有",
								value: true
							},
							{
								label: "无",
								value: false
							}
						]
					},
					rules: {
						required: true,
						message: "平板不能为空"
					}
				},
                {
					prop: "iPad_num",
					label: "平板数量",
					span: 12,
					value: 1,
                    hidden: ({ scope }: any) => !(scope.isiPad),
					component: {
						name: "el-input-number"
					}
				},
                {
					prop: "isTV",
					label: "电视",
					span: 12,
					value: true,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "有",
								value: true
							},
							{
								label: "无",
								value: false
							}
						]
					},
					rules: {
						required: true,
						message: "电视不能为空"
					}
				},
                {
					prop: "TV_num",
					label: "电视数量",
					span: 12,
					value: 1,
                    hidden: ({ scope }: any) => !(scope.isTV),
					component: {
						name: "el-input-number"
					}
				},
                {
					prop: "is_center_table",
					label: "中心桌",
					span: 12,
					value: true,
					component: {
						name: "el-radio-group",
						options: [
							{
								label: "有",
								value: true
							},
							{
								label: "无",
								value: false
							}
						]
					},
					rules: {
						required: true,
						message: "中心桌不能为空"
					}
				},
				{
					prop: "note",
					label: "备注",
					span: 24,
					component: {
						name: "el-input",
						type: "textarea",
						props: {
							placeholder: "请输入备注"
						}
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					type: "index",
					label: "#",
					width: 60
				},
				{
					prop: "name",
					label: "教室名称"
				},
				{
					prop: "isPC",
					label: "是否有电脑"
				},
				{
					prop: "isiPad",
					label: "是否有平板"
				},
				{
					prop: "isTV",
					label: "是否有电视"
				},
				{
					prop: "pc_num",
					label: "电视数量"
				},
				{
					prop: "iPad_num",
					label: "平板数量"
				},
				{
					prop: "TV_num",
					label: "电视数量"
				},
				{
					prop: "is_center_table",
					label: "是否有中心桌"
				},
				{
					label: "操作",
					type: "op"
				}
			]
		});

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// 绑定 service
			ctx.service(service.classroomService).done();
			app.refresh();
		}

		return {
			refs,
			setRefs,
			upsert,
			table,
			onLoad
		};
	}
});
</script>
